<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    %>
    <script type="text/javascript" src="<%=basePath%>js/jquery-1.9.1.min.js"></script>
    <link rel="stylesheet" href="<%=basePath%>css/bootstrap.css"/>
    <script type="text/javascript" src="<%=basePath%>js/bootstrap/bootstrap.js"></script>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title></title>

    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">

    <script src="../../assets/js/ie8-responsive-file-warning.js"></script>
    <script src="./Carousel Template for Bootstrap_files/ie-emulation-modes-warning.js"></script>
    <style type="text/css"></style>
    <script src="./Carousel Template for Bootstrap_files/ie10-viewport-bug-workaround.js"></script>

    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <link href="http://getbootstrap.com/examples/carousel/carousel.css" rel="stylesheet">
    <style id="holderjs-style" type="text/css"></style>
    <style type="text/css">
        body {font-family:'微软雅黑';}
        @-moz-keyframes nodeInserted {
               from {
                   opacity: 0.99;
               }
               to {
                   opacity: 1;
               }
           }

        @-webkit-keyframes nodeInserted {
            from {
                opacity: 0.99;
            }
            to {
                opacity: 1;
            }
        }

        @-o-keyframes nodeInserted {
            from {
                opacity: 0.99;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes nodeInserted {
            from {
                opacity: 0.99;
            }
            to {
                opacity: 1;
            }
        }

        embed, object {
            animation-duration: .001s;
            -ms-animation-duration: .001s;
            -moz-animation-duration: .001s;
            -webkit-animation-duration: .001s;
            -o-animation-duration: .001s;
            animation-name: nodeInserted;
            -ms-animation-name: nodeInserted;
            -moz-animation-name: nodeInserted;
            -webkit-animation-name: nodeInserted;
            -o-animation-name: nodeInserted;
        }
    </style>
    <style>
        @-moz-keyframes nodeInserted {
               from {
                   opacity: 0.99;
               }
               to {
                   opacity: 1;
               }
           }

        @-webkit-keyframes nodeInserted {
            from {
                opacity: 0.99;
            }
            to {
                opacity: 1;
            }
        }

        @-o-keyframes nodeInserted {
            from {
                opacity: 0.99;
            }
            to {
                opacity: 1;
            }
        }

        @keyframes nodeInserted {
            from {
                opacity: 0.99;
            }
            to {
                opacity: 1;
            }
        }

        embed, object {
            animation-duration: .001s;
            -ms-animation-duration: .001s;
            -moz-animation-duration: .001s;
            -webkit-animation-duration: .001s;
            -o-animation-duration: .001s;
            animation-name: nodeInserted;
            -ms-animation-name: nodeInserted;
            -moz-animation-name: nodeInserted;
            -webkit-animation-name: nodeInserted;
            -o-animation-name: nodeInserted;
        }
    </style>

</head>
<body>

    <%--标题栏--%>
    <div class="navbar-wrapper">
        <div class="container">

            <div class="navbar navbar-inverse navbar-static-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="">铁路客服中心</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="">首页</a></li>
                            <li><a href="">余票查询</a></li>
                            <li><a href="">购票</a></li>
                            <li class="dropdown">
                                <a href="" class="dropdown-toggle" data-toggle="dropdown">我的账户 <span class="caret"></span></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="">我的信息</a></li>
                                    <li><a href="">我的车票</a></li>
                                    <li class="divider"></li>
                                    <li><a href="">注册</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>


    <div id="myCarousel" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1" class=""></li>
            <li data-target="#myCarousel" data-slide-to="2" class=""></li>
        </ol>
        <div class="carousel-inner">
            <div class="item active">
                <img src="img/2.jpg" alt="First slide">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>您的安心我们的放心.</h1>
                        <p>购票网站全 <code>心</code> 改版，更加符合购票流程，360天3600多次的修改，全新服务</p>
                        <p><a class="btn btn-lg btn-primary" href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm" role="button">Sign up today</a></p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="img/1.jpg" alt="Second slide">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>温馨提醒</h1>
                        <p>网站可提前20天购买火车票，网站可提前20天购买火车票，网站可提前20天购买火车票，网站可提前20天购买火车票</p>
                        <p><a class="btn btn-lg btn-primary" href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm" role="button">Learn more</a></p>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="img/3.jpg" alt="Third slide">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>高铁全新上线</h1>
                        <p>高铁带我们走进了“快旅慢游”的时代，清晨在成都喝茶，上午到上海看外滩，下午到普陀礼佛，傍晚在乌镇漫步，晚上在西湖游船，午夜再回到成都，你是否曾羡慕过？如果是，那就快来坐高铁旅游吧。</p>
                        <p><a class="btn btn-lg btn-primary" href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm" role="button">Browse gallery</a></p>
                    </div>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="http://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <a class="right carousel-control" href="http://getbootstrap.com/examples/carousel/#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
    </div><!-- /.carousel -->





    <div class="container marketing">

        <!-- Three columns of text below the carousel -->
        <div class="row">
            <div class="col-lg-4">
                <img class="img-circle" src="img/3.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;">
                <h2>预定车票</h2>
                <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus magna.</p>
                <p><a class="btn btn-default" href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm" role="button">View details »</a></p>
            </div><!-- /.col-lg-4 -->
            <div class="col-lg-4">
                <img class="img-circle" src="img/3.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;">
                <h2>购买车票</h2>
                <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.</p>
                <p><a class="btn btn-default" href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm" role="button">View details »</a></p>
            </div><!-- /.col-lg-4 -->
            <div class="col-lg-4">
                <img class="img-circle" src="img/3.jpg" alt="Generic placeholder image" style="width: 140px; height: 140px;">
                <h2>退票</h2>
                <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                <p><a class="btn btn-default" href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm" role="button">View details »</a></p>
            </div><!-- /.col-lg-4 -->
        </div><!-- /.row -->


        <!-- START THE FEATURETTES -->

        <hr class="featurette-divider">

        <div class="row featurette">
            <div class="col-md-7">
                <h2 class="featurette-heading">First featurette heading. <span class="text-muted">It'll blow your mind.</span></h2>
                <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
            </div>
            <div class="col-md-5">
                <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="500x500" src="">
            </div>
        </div>

        <hr class="featurette-divider">

        <div class="row featurette">
            <div class="col-md-5">
                <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="500x500" src="">
            </div>
            <div class="col-md-7">
                <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
                <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
            </div>
        </div>

        <hr class="featurette-divider">

        <div class="row featurette">
            <div class="col-md-7">
                <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
                <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
            </div>
            <div class="col-md-5">
                <img class="featurette-image img-responsive" data-src="holder.js/500x500/auto" alt="500x500" src="">
            </div>
        </div>

        <hr class="featurette-divider">

        <!-- /END THE FEATURETTES -->


        <!-- FOOTER -->
        <footer>
            <p class="pull-right"><a href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm">Back to top</a></p>
            <p>© 2014 Company, Inc. · <a href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm">Privacy</a> · <a href="./Carousel Template for Bootstrap_files/Carousel Template for Bootstrap.htm">Terms</a></p>
        </footer>

    </div><!-- /.container -->


</body>
</html>